<template>
  <el-tree
    :data="data"
    sshow-checkbox
    class="tree"
    node-key="id"
    ddraggable
    :props="defaultProps"
    :indent="treeIndent"
    ><template v-slot:default="{ node }">
      <ElementTreeLine1
        :node="node"
        :showLabelLine="false"
        :indent="treeIndent"
      >
        <template v-slot:node-label>
          <el-icon><School /></el-icon>
          <span style="font-size: 12px">
            {{ node.label }}
          </span>
        </template>
        <!-- <template v-slot:after-node-label>
          <span style="padding-right: 10px">
            <el-button size="default">按钮</el-button>
          </span>
        </template> -->
      </ElementTreeLine1>
    </template>
  </el-tree>
</template>
<script lang="ts" setup>
import { getElementLabelLine } from "./ElementTreeLine/index.js";
// import { getElementLabelLine } from "element-tree-line";
// import "element-tree-line/dist/style.css";
import { h } from "vue";
const ElementTreeLine = getElementLabelLine(h);
import ElementTreeLine1 from "@/views/Test/components/ElementTreeLine1.jsx";

const data = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
];
const defaultProps = {
  children: "children",
  label: "label",
};
const treeIndent = 30;
</script>
<style lang="scss" scoped>
.el-tree-node__content {
  padding-top: 5px;
  padding-bottom: 5px;
}
.tree {
  :deep(.el-tree-node__expand-icon) {
    transform: rotate(0deg);
    visibility: hidden;
    &:not(.expanded) {
      &:not(.is-leaf)::before {
        visibility: visible;
        content: "+";
        font-size: 20px;
        border: 1px solid #e3e3e3;
        background-color: #ececec;
      }
    }

    &.expanded::after {
      visibility: visible;
      content: "-";
      font-size: 20px;
      border: 1px solid #e3e3e3;
      background-color: #e3e3e3;
    }
  }
}
</style>
